<!-- <template>
    <!-- <Editor :init="init"></Editor> -->
    <textarea :id="id"></textarea>
</template>

<script lang="ts" setup>
import { onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from 'vue'
import * as qiniu from 'qiniu-js'
import { Http } from '@/libs'
import { Guid } from 'guid-typescript'

const prop = defineProps({
    value: {
        type: String,
        default: '',
    },
    height: {
        type: Number,
        default: 420,
    },
})

const text = ref<string>(prop.value)

const ready = ref<boolean>(false)

const emit = defineEmits(['update:value'])

watch(text, (nv, _ov) => {
    emit('update:value', nv)
})
onMounted(() => {
    if (ready.value) {
        return
    }
    ready.value = true
    window.$tinymce.init(init)
})
onActivated(() => {
    if (ready.value) {
        return
    }
    ready.value = true
    window.$tinymce.init(init)
})

onDeactivated(() => {
    if (!ready.value) {
        return
    }
    ready.value = false
    window.$tinymce.get(id.value).destroy()
})

onUnmounted(() => {
    if (!ready.value) {
        return
    }
    ready.value = false
    window.$tinymce.get(id.value).destroy()
})

const id = ref<string>('vue-tinymce-' + new Date().getTime())

const init = {
    selector: '#' + id.value,
    menubar: false,
    min_height: prop.height,
    max_height: prop.height,
    language: 'zh_CN',
    language_url: '/scripts/tinymce/langs/zh_CN.js', // site absolute URL
    // plugins: 'lists link image table code help wordcount',
    // full plugins :         'advlist anchor autolink autoresize autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking  pagebreak preview quickbars save searchreplace table template visualblocks visualchars wordcount',
    // toolbar: 'styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | undo redo',
    plugins:
        'advlist anchor autolink autoresize autosave charmap code codesample directionality emoticons fullscreen help image importcss insertdatetime link lists media nonbreaking  pagebreak preview quickbars save searchreplace table template visualblocks visualchars wordcount',
    // toolbar1:
    //     'formats styleselect fontselect  formatselect  fontsizeselect  forecolor backcolor  bold italic underline strikethrough  image  media  table  alignleft aligncenter alignright alignjustify  outdent indent  numlist bullist preview removeformat  hr  paste code  link  undo redo  fullscreen',
    toolbar:
        ' bold italic underline strikethrough | forecolor backcolor | undo redo | link image media table hr | alignleft aligncenter alignright alignjustify outdent indent | numlist bullist | removeformat paste | fullscreen preview code',
    images_upload_handler: (blobInfo: any, progress: any) =>
        new Promise((resolve, reject) => {
            console.log(blobInfo)
            Http.post('/comm/tool/file/qiniu/info', { type: 'Image' }).then(resp => {
                if (resp.stat.err > 0) {
                    reject('Invalid JSON: ' + `[${resp.stat.err}]${resp.stat.msg}`)
                    return
                }

                let config = {
                    useCdnDomain: true,
                    forceDirect: true,
                }

                let key = resp.data.path + Guid.create().toString() + '.' + blobInfo.filename().split('.').pop()?.toLowerCase()

                qiniu.upload(blobInfo.blob(), key, resp.data.token, {}, config).subscribe({
                    next: res => {
                        console.log(res)
                        progress((res.total.loaded / res.total.size) * 100)
                    },
                    error: err => {
                        console.log(err)
                        reject(err)
                    },
                    complete: res => {
                        console.log(res)
                        resolve(resp.data.domain + '/' + res.key)
                    },
                })
            })
        }),
    textContent: text.value,
    setup: (editor: any) => {
        editor.on('click', () => {
            console.log('Editor was clicked')
        })
        editor.on('NodeChange Change KeyUp ', () => {
            text.value = editor.getContent()
        })
    },
    init_instance_callback: (editor: any) => {
        // console.log(`Editor: ${editor.id} is now initialized.`)
    },
}
</script> -->
